<template>
  <div class="card content-box">
    <div class="table-box">
      <ProTable ref="proTable" :columns="columns" :request-api="getTableList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button v-auth="'dict:dict_item:save'" type="primary" :icon="CirclePlus" @click="onSave">添加字典项</el-button>
        </template>
        <!-- 操作 -->
        <template #operation="scope">
          <el-button v-auth="'dict:dict_item:update'" type="primary" link :icon="EditPen" @click="onUpdate(scope.row)">
            编辑
          </el-button>
          <el-button v-auth="'dict:dict_item:delete'" type="danger" link :icon="Delete" @click="onDelete(scope.row)">
            删除
          </el-button>
        </template>
      </ProTable>
      <DictItemOperateDrawer ref="drawerRef"></DictItemOperateDrawer>
    </div>
  </div>
</template>

<script setup lang="ts" name="tabsDetail">
import { useRoute } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import {
  addDictItem,
  deleteDictItem,
  DictItemPageParam,
  DictItemPageResult,
  getDictItemPage,
  getEnumDictItem,
  updateDictItem
} from "@/api/modules/sys/dict";
import { ref } from "vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import DictItemOperateDrawer from "@/views/system/dictManage/DictItemOperateDrawer.vue";

// 设置tab的标题信息
const route = useRoute();
const tabStore = useTabsStore();
tabStore.setTabsTitle(`${route.query.dictName} - ${route.meta.title}`);

const columns: ColumnProps[] = [
  { prop: "label", label: "字典标签", search: { el: "input", tooltip: "字典标签" } },
  { prop: "value", label: "字典值", search: { el: "input", tooltip: "字典值" } },
  { prop: "valueType", label: "值类型", enum: () => getEnumDictItem("DictValueType") },
  { prop: "extendJson", label: "附加信息" },
  { prop: "operation", label: "操作", fixed: "right" }
];

const proTable = ref<ProTableInstance>();

const getTableList = (param: DictItemPageParam) => {
  // 字典id为必填项
  param.dictId = route.params.id;
  return getDictItemPage(param);
};

const drawerRef = ref<InstanceType<typeof DictItemOperateDrawer> | null>();

const onSave = () => {
  drawerRef.value?.openDrawer({
    title: "新增",
    isSave: true,
    isUpdate: false,
    row: { dictId: route.params.id },
    api: addDictItem,
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};

const onUpdate = (row: DictItemPageResult) => {
  drawerRef.value?.openDrawer({
    title: "更新",
    isSave: false,
    isUpdate: true,
    row: row,
    api: updateDictItem,
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};

// 删除信息
const onDelete = async (row: DictItemPageResult) => {
  await useHandleData(deleteDictItem, [row.id], `删除【${row.label}】`);
  proTable.value?.getTableList();
};
</script>
